<template>
  <div id="baseinfo">
    <div id="category">
      <span>全部商品分类</span>
      <router-link :to="{ path: '/products', query: { msg: 1 } }"
        >电子产品</router-link
      >
      <router-link :to="{ path: '/products', query: { msg: 2 } }"
        >学习文具</router-link
      >
      <router-link :to="{ path: '/products', query: { msg: 3 } }"
        >生活用品</router-link
      >
      <router-link :to="{ path: '/products', query: { msg: 4 } }"
        >美妆服饰</router-link
      >
      <router-link :to="{ path: '/products', query: { msg: 5 } }"
        >教材图书</router-link
      >
      <router-link :to="{ path: '/products', query: { msg: 6 } }"
        >食品饮料</router-link
      >
      <router-link :to="{ path: '/products', query: { msg: 7 } }"
        >精美礼品</router-link
      >
      <router-link :to="{ path: '/products', query: { msg: 8 } }"
        >休闲娱乐</router-link
      >
      <router-link :to="{ path: '/products', query: { msg: 9 } }"
        >其他</router-link
      >
      <router-link to="/needMarket">需求市集</router-link>
    </div>
    <div id="todayreco">
      <span>今日推荐</span>
      <div id="title1">
        <router-link :to="{ path: '/product', query: { id: 1 } }">
          <img src="../assets/img/test.jpg" alt="图片显示不出来了QAQ" />
        </router-link>
      </div>
    </div>
    <div id="latest">
      <span>最新上架</span>
      <div id="title2">
        <router-link :to="{ path: '/product', query: { id: 2 } }">
          <img src="../assets/img/title.webp" />
        </router-link>
      </div>
      <div id="title3">
        <router-link :to="{ path: '/product', query: { id: 3 } }">
          <img src="../assets/img/title2.png" />
        </router-link>
      </div>
    </div>
  </div>
</template>

<style scoped>
#baseinfo {
  display: flex;
  justify-content: center;
  background-color: rgb(232, 232, 232);
}

#category {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

#category span {
  text-align: center;
  width: 300px;
  font-weight: bold;
  color: #2c3e50;
}

#category span {
  background-color: #b1191a;
  line-height: 40px;
  color: white;
}

#category a {
  background-color: #c81623;
  line-height: 40px;
  font-weight: bold;
  color: white;
}

#category a {
  padding-left: 20px;
  width: 280px;
}

#category a:hover {
  background-color: #fff;
  color: #c81623;
}

#todayreco {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

#todayreco span,
#latest span {
  text-align: center;
  line-height: 40px;
  font-weight: bold;
  color: black;
}

#title1,
#todayreco img {
  height: 400px;
  width: 525px;
}

#latest {
  display: flex;
  flex-direction: column;
}

#title2,
#title3,
#latest img {
  height: 200px;
  width: 250px;
}
</style>
